<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
<div id="app">
    <girl :favorite-a="items">
        <template slot="cute" scope="variable"> <!-- /*作用域插槽也是可以具名的*/ -->
            <li style="padding:8px 2px;">{{variable.thing}}</li><!-- scope变量调用的值必须和slot传出的值保持一致 -->
        </template>

    </girl>
</div>
<script>
    Vue.component('girl', {
        template: `
        <ul>
            <slot name="cute" v-for="dos in favoriteA" :thing = "dos.what" ></slot>
        </ul>`,
        props: ['favorite-a']//数据是从外部传进来的  所以需要props动态接收
        //父组件动态绑定的属性要和props中的属性的写法保持一致，但是在slot中计算时要还原成驼峰形式
    })
    new Vue({
        el: "#app",
        data: {
            items: [
                {what: '逛'},
                {what: '吃'},
                {what: '打扮'},
                {what: '逛'},
                {what: '吃'},
                {what: '打扮'},
                {what: '逛'},
                {what: '吃'},
                {what: '打扮'}
            ]
        }
    })
</script>
</body>
</html>